﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5新增标签</title>
<style>
	.clear:after{ content:""; display:block; clear:both; }
	#main{ width:480px; margin:0 auto; 
		color:white; font-weight:bold; }
	header{ height:170px; background:red; padding:10px 0; }
	footer{ height:50px; background:blue; 
		padding:10px 0; clear:both; }
	nav li{ float:left; margin-right:100px; }
	article{ width:300px; height:200px; color:black; 
		border:1px #000 solid; float:left; padding:10px 0; }
	aside{ width:170px; height:200px; color:black; 
		border:1px #000 solid; float:right; padding:10px 0; }
</style>
</head>
<body>
<div id="main">
	<header>
    	页眉：页面的头部
    	<hgroup>
        	<h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
        	<ul>
            	<li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
            </ul>
        </nav>
    </header>
    <article>主体信息</article>
    <aside>辅助信息</aside>
    <footer>页脚：页面的尾部</footer>
</div>
</body>
</html>
